AngularJS Animations
AngularJS CSS এর সাহায্যে অ্যানিমেটেড ট্রানজিশন প্রদান করে।
অ্যানিমেশন কি?
একটি অ্যানিমেশন হল যখন একটি HTML উপাদানের পরিবর্তন আপনাকে গতির বিভ্রম দেয়।
উদাহরণ:
DIV লুকানোর জন্য চেকবক্স চেক করুন:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>দ্রষ্টব্য:
অ্যাপগুলি অ্যানিমেশনে পূর্ণ হওয়া উচিত নয়, তবে কিছু অ্যানিমেশন অ্যাপটিকে বোঝা সহজ করে তুলতে পারে।
আমার কি দরকার?
অ্যানিমেশনের জন্য আপনার অ্যাপ্লিকেশনগুলি প্রস্তুত করতে, আপনাকে AngularJS অ্যানিমেট লাইব্রেরি যোগ করতে হবে:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>তারপরে আপনাকে আপনার অ্যাপ্লিকেশনে ngAnimate মডিউলটি উল্লেখ করতে হবে:
<body ng-app="ngAnimate">অথবা যদি আপনার অ্যাপ্লিকেশনটির একটি নাম থাকে, তাহলে আপনার অ্যাপ্লিকেশন মডিউলে একটি প্রক্সি হিসাবে ngAnimate যোগ করুন:
উদাহরণ
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>ngAnimate কি করে?
ngAnimate মডিউল ক্লাস যোগ করে এবং সরিয়ে দেয়।
ngAnimate মডিউল আপনার HTML উপাদানগুলিকে অ্যানিমেট করে না, কিন্তু যখন ngAnimate নির্দিষ্ট ইভেন্টগুলি পর্যবেক্ষণ করে, উদাহরণস্বরূপ একটি HTML উপাদান লুকানো বা দেখানো, তখন উপাদানটি কিছু পূর্বনির্ধারিত ক্লাস উত্তরাধিকার সূত্রে পায় যা অ্যানিমেশন তৈরি করতে ব্যবহার করা যেতে পারে।
AngularJS-এর নির্দেশাবলী যা ক্লাস যোগ/সরিয়ে দেয়:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
এনজি-শো এবং এনজি-হাইড নির্দেশাবলী একটি এনজি-হাইড ক্লাস মান যোগ করে বা সরিয়ে দেয়।
অন্যান্য নির্দেশাবলী এনজি-এন্টার ক্লাস মান যোগ করে যখন তারা DOM এ প্রবেশ করে এবং এনজি-লিভ অ্যাট্রিবিউট যখন ডিওএম থেকে সরানো হয়।
এনজি-রিপিট নির্দেশিকা এইচটিএমএল উপাদানের অবস্থান পরিবর্তন করার সময় এনজি-মুভ ক্লাস মান যোগ করে।
বর্ণনা:
অ্যানিমেশন অংশে, এইচটিএমএল উপাদান ক্লাসে মানগুলির একটি সংগ্রহ রয়েছে যা অ্যানিমেশন শেষ হলে মুছে ফেলা হবে।
উদাহরণ: ng-hide নির্দেশিকা এই শ্রেণীর মান যোগ করে:
- ng-animate
- ng-hide-animate
- ng-hide-add (যদি উপাদানটি লুকানো হবে)
- ng-hide-remove (যদি উপাদান প্রদর্শিত হয়)
- ng-hide-add-active (যদি উপাদানটি লুকানো হবে)
- ng-hide-remove-active (যদি উপাদান প্রদর্শিত হয়)
CSS ব্যবহার করে অ্যানিমেশন
CSS ট্রানজিশন বা CSS অ্যানিমেশন HTML উপাদানগুলিকে অ্যানিমেট করতে ব্যবহার করা যেতে পারে।
এই টিউটোরিয়ালটি আপনাকে উভয়ই দেখাবে।
শিক্ষা:
CSS অ্যানিমেশন সম্পর্কে আরও জানতে, jassif দলের CSS রূপান্তর টিউটোরিয়াল এবং CSS অ্যানিমেশন টিউটোরিয়াল পড়ুন।
CSS পরিবর্তন
CSS ট্রানজিশন আপনাকে একটি নির্দিষ্ট সময়ের মধ্যে CSS অ্যাট্রিবিউটের মানগুলিকে একটি মান থেকে অন্য মানতে মসৃণভাবে পরিবর্তন করতে দেয়:
উদাহরণ:
যখন DIV উপাদানটি .ng-hide ক্লাস পায়, তখন ট্রানজিশনে 0.5 সেকেন্ড সময় লাগে এবং উচ্চতা 100px থেকে 0 এ মসৃণভাবে পরিবর্তিত হয়:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>চেষ্টা করার জন্য:
উপরের কোডটি কপি করুন এবং আপনার HTML ফাইলে পেস্ট করুন। আপনি যখন DIV লুকাবেন তখন আপনি একটি মসৃণ রূপান্তর দেখতে পাবেন।
CSS অ্যানিমেশন
CSS অ্যানিমেশনগুলি আপনাকে একটি নির্দিষ্ট সময়ের মধ্যে CSS অ্যাট্রিবিউট মানগুলিকে একটি মান থেকে অন্য মানগুলিতে মসৃণভাবে স্থানান্তর করতে দেয়:
উদাহরণ:
যখন DIV উপাদানটি .ng-hide ক্লাস পায়, তখন myChange অ্যানিমেশন চলে, মসৃণভাবে উচ্চতা 100px থেকে 0 এ পরিবর্তন করে:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>দ্রষ্টব্য:
@keyframes অ্যানিমেশনের বিভিন্ন ধাপ সংজ্ঞায়িত করতে ব্যবহৃত হয়। উপরের উদাহরণে, অ্যানিমেশন 100px থেকে 0 এ পরিবর্তিত হয়।
একটি বাস্তব উদাহরণ
<!DOCTYPE html> <html> <মাথা> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script> <স্টাইল> div { রূপান্তর: সমস্ত রৈখিক 0.5s; ব্যাকগ্রাউন্ড-রঙ: হালকা নীল; উচ্চতা: 100px; প্রস্থ: 100%; } .ng-লুকান { উচ্চতা: 0; } </style> </head> <body ng-app="myApp"> <h1>চেষ্টা করার জন্য অ্যানিমেশন:</h1> DIV লুকানোর জন্য <ইনপুট type="checkbox" ng-model="myCheck"> <div ng-hide="myCheck"></div> <script> var app = angular.module('myApp', ['ngAnimate']); </script> </body> </html>অনুশীলন করুন
নীচের টিউটোরিয়ালে অ্যাঙ্গুলারজেএস অ্যানিমেশন সম্পর্কে আপনার বোঝার পরীক্ষা করুন:
AngularJS অ্যানিমেশন টিউটোরিয়াল
পরামর্শ:
স্ট্যাটিক ইফেক্টের জন্য CSS ট্রানজিশন এবং আরও জটিল প্রভাবের জন্য CSS অ্যানিমেশন ব্যবহার করুন। উভয়ই jassif দলের CSS টিউটোরিয়াল থেকে শেখা যাবে।
সাধারণ অ্যানিমেশন প্রভাব
অন্তর্ধান/আবির্ভাব
অস্বচ্ছতা সংশোধক ব্যবহার করে উপাদানগুলি নরমভাবে লুকান/লুকান
স্লাইড প্রভাব
উচ্চতা/প্রস্থ রূপান্তর ব্যবহার করে উপাদানগুলি স্লাইড করুন
চক্র
ঘূর্ণন রূপান্তর ব্যবহার করে উপাদান ঘোরান
বাউন্স প্রভাব
@keyframes ব্যবহার করে উপাদানগুলিতে বাউন্স প্রভাব দিন